<template>
    <div class="box">
        <div class="main">
            <h3>密码登录</h3>
            <div class="inputbox">
                <div class="container">
                    <input type="text" placeholder="手机/用户名">
                </div>
                <div class="container">
                    <input type="password" placeholder="密码">
                </div>
            </div>
            <button @click="login">登录</button>
            <div class="method">
                <a href="#">手机号登录</a>
                <a href="#">忘记密码</a>
            </div>
        </div>
        <div class="bottom">
            <input type="checkbox">
            已阅读并同意
            <a href="#">《用户服务协议》</a>
            、
            <a href="#">《隐私政策》</a>
        </div>
    </div>
</template>

<script>

import user_login from "../api/login"
export default {
    name: 'App',
    data(){
        return{
            phone:"",
            phone:""
        }
    },
    components: {

    },
    methods: {
        login() {

            user_login({ phone: this.phone,pass:this.pass }).then((res) => {
                if(code==200){

                    localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo))
                }
            })
        }
    }
}

</script>

<style>
.box {
    height: 600px;
    box-sizing: border-box;
    padding: 60px 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.box .main h3 {
    font-size: 20px;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.box .main .inputbox .container input {
    width: 100%;
    line-height: 60px;
    outline: none;
    border: none;
    border-bottom: 1px solid lightgrey;
    background-color: beige;
}

.box .main .inputbox {
    margin-bottom: 60px;
}

.box .main button {
    width: 100%;
    line-height: 40px;
    text-align: center;
    border: none;
    border-radius: 20px;
    color: grey;
    background-color: #e0e0e0;
    margin-bottom: 15px;
}

.box .main .method {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.box a {
    text-decoration: none;
    color: #279be8;
}

.box .bottom {
    font-size: 14px;
}

.box .bottom {

    color: gray;
}
</style>